<%@ page contentType="text/html; charset=utf-8" %>
<%@ page language="java" pageEncoding="utf-8"%>

<%@ include file="header.jsp" %>

<body onload="startPytania()">
<div id="main" data-role="page" data-rockncoder-jspage="manageBarChart">  
 	
 	<header data-role="header" data-position="fixed">
    	<a href="userLogin!toMainPage.action" data-icon="back" data-transition="fade">Powrót</a>
      	<h1>Test</h1>
    </header>
    
    <section data-role="content">
    
    <!-- Default text in popup -->
    <div data-role="popup" id="popupWynikStyle" class="popupWynik"><p id="wynikTekst">Przepraszamy wystąpił błąd.</p></div>
    
 <script>
 var nr;
 var pytania = new Array();
 //udzielane odpowiedzi
 var odpowiedzi = new Array();
 var randomNr = 0;
 var iloscPytan = 18;
 var iloscWszystkichPytan = 0;
 
 function startPytania(){
	 nr = 0;
	 $.ajax(
			   {
			      type: "POST",
			      dataType: "json",
			      url: "testy!list.action",
			      success: function( response ) 
			      { 
			    	  iloscWszystkichPytan = response.length;
			    	  
			    	  randomNr=Math.floor(Math.random()*iloscWszystkichPytan);
			    	  
			    	  document.getElementById("nrPytania").innerHTML="1/"+iloscPytan;
			    	  document.getElementById("testyPytanie").innerHTML=response[randomNr].pytanie;
		    		  document.getElementById("odpA").innerHTML=response[randomNr].a;
		    		  document.getElementById("odpB").innerHTML=response[randomNr].b;
		    		  document.getElementById("odpC").innerHTML=response[randomNr].c;
		    		  $( "#imgTest" ).attr( "src", "testPic/" + response[randomNr].kod + ".jpg" );
		    		  
			    	  for (x=0; x<iloscWszystkichPytan; x++) {
			    		  pytania[x] = new Array();
			    		  pytania[x]['testyPytanie'] = response[x].pytanie;
			    		  pytania[x]['odpA'] = response[x].a;
			    		  pytania[x]['odpB'] = response[x].b;
			    		  pytania[x]['odpC'] = response[x].c;
			    		  pytania[x]['kod'] = response[x].kod;
			    		  pytania[x]['odp'] = response[x].odp;
			    	  }
			      }
			   } );
 }
 
 onload=startPytania();
 
 var wyslij = function() {
	getOdpowiedzi();
	
	nr++;
	
	$("#checkbox-1a").attr("checked",false).checkboxradio("refresh");
	$("#checkbox-2a").attr("checked",false).checkboxradio("refresh");
	$("#checkbox-3a").attr("checked",false).checkboxradio("refresh");
	
	if(nr!=iloscPytan)
	{
		//następne pytanie
		randomNr=Math.floor(Math.random()*iloscWszystkichPytan);
		
		document.getElementById("nrPytania").innerHTML= (nr+1) + "/"+iloscPytan;
		document.getElementById("testyPytanie").innerHTML=pytania[randomNr]['testyPytanie'];
	    document.getElementById("odpA").innerHTML=pytania[randomNr]['odpA'];
	    document.getElementById("odpB").innerHTML=pytania[randomNr]['odpB'];
	    document.getElementById("odpC").innerHTML=pytania[randomNr]['odpC'];
	    $( "#imgTest" ).attr( "src", "testPic/" + pytania[randomNr]['kod'] + ".jpg" );
	}else{
		var jsonOdp = '[';
		var stringLenght = odpowiedzi.length;
		
		
		 for (i = 0; i < stringLenght; i++)
		    {

			 jsonOdp += '{' + '"id":"' + i + 
		        	'","a":"' + odpowiedzi[i]['a'] + 
		        	'","b":"' + odpowiedzi[i]['b'] + 
		        	'","c":"' + odpowiedzi[i]['c'] + 
		        	'","kod":"' + odpowiedzi[i]['kod'] +
		        	'"}';


		             if (i != stringLenght - 1)
		            {
		            	 jsonOdp += ',';
		            }

		    }
		
		jsonOdp += ']';
		
		$.ajax({
	        type: "POST",
	        url: "testy!result.action",
	        data: { 'jsonOdp' : jsonOdp },        
	        dataType: 'json',
	        success: function(response){
	        	if(response == 0){
	        		$("p#wynikTekst").text("Niestety nie udało ci się odpowiedzieć na żadne pytanie prawidłowo");
	        	}else if(response == 1){
	        		$("p#wynikTekst").text("Niestety udało ci się odpowiedzieć prawidłowo tylko na 1 pytanie.");
	        	}else if(response < 8){
	        		$("p#wynikTekst").text("Poprawnie odpowiedziałeś na "+response + " pytań. Postaraj się lepiej!");
	        	}else if(response < 16){
	        		$("p#wynikTekst").text("Poprawnie odpowiedziałeś na "+response + " pytań. Jest nieźle!!");
	        	}else{
	        		$("p#wynikTekst").text("Gratulacje!!! Poprawnie odpowiedziałeś na "+response + " pytań");
	        	}

	        	$( "div.popupWynik" ).popup( "open", { overlayTheme: "a" } );
	        	
	        }
		});
		
		
		//nowa pula puytań
		nr=0;
		
		randomNr=Math.floor(Math.random()*iloscWszystkichPytan);
		
		 document.getElementById("nrPytania").innerHTML="1/"+iloscPytan;
		document.getElementById("testyPytanie").innerHTML=pytania[randomNr]['testyPytanie'];
	    document.getElementById("odpA").innerHTML=pytania[randomNr]['odpA'];
	    document.getElementById("odpB").innerHTML=pytania[randomNr]['odpB'];
	    document.getElementById("odpC").innerHTML=pytania[randomNr]['odpC'];
	    $( "#imgTest" ).attr( "src", "testPic/" + pytania[randomNr]['kod'] + ".jpg" );
	}
	
	
	

 }

 function getOdpowiedzi(){
	 odpowiedzi[nr] = new Array();
	 odpowiedzi[nr]['a'] = document.getElementById("checkbox-1a").checked;
	 odpowiedzi[nr]['b'] = document.getElementById("checkbox-2a").checked;
	 odpowiedzi[nr]['c'] = document.getElementById("checkbox-3a").checked;
	 odpowiedzi[nr]['kod'] = pytania[randomNr]['kod'];
	 
	
 }
 
 function dalejTest(fn){
	fn();
 }
 
 </script>
 		<div id="nrPytania"></div>
 		<p>
 		<center>
 		<img id="imgTest"/>
 		</center>
 		</p>
 		
 		<p><h3><div id="testyPytanie"></div></h3></p>
	    
	    <fieldset data-role="controlgroup">
		   <input type="checkbox" name="form.odpA" id="checkbox-1a" class="custom" />
		   <label for="checkbox-1a"><div id="odpA"></div></label>
		   <input type="checkbox" name="form.odpB" id="checkbox-2a" class="custom" />
		   <label for="checkbox-2a"><div id="odpB"></div></label>
		   <input type="checkbox" name="form.odpC" id="checkbox-3a" class="custom" />
		   <label for="checkbox-3a"><div id="odpC"></div></label>
	    </fieldset>
 		
 		
	<button id="dalejButton" type="submit" onclick="dalejTest(wyslij)">Dalej</button>
	
    </section>
    
    <div data-role="footer">
		<h4>E-PRAWO JAZDY</h4>
	</div>
</div>

</body>
</html>